<template>
  <my-div>
    <div>
    <div class="vxc-header vxc-flex-row">
      <div class="tab vxc-flex-row">
          <div class="tab-item" @click="onTabbarClick(0)">
           <text style="color: rgba(154,156,164,1);font-size: 30px;text-align: center;line-height: 80px;">团队成员</text>
          </div>
          <div class="tab-item" @click="onTabbarClick(1)">
            <text style="color: rgba(154,156,164,1);font-size: 30px;text-align: center;line-height: 80px;">直推成员</text>
          </div>
          <div class="tab-item" @click="onTabbarClick(2)">
            <text style="color: rgba(154,156,164,1);font-size: 30px;text-align: center;line-height: 80px;">奖励查询</text>
          </div>
        </div>
       <div class="vxc-nav vxc-active" 
        ref='vxc-wrapper' 
      ></div>
    </div>
    <div :style="{width: (750 * this.data.length) + 'px'}" class="vxc-flex-row" ref="vxc-main">
      <div class="vxc-container">
           <scroller>
              <image style="width:750px;height:416px" src="root:img/my/team.png"></image>
           </scroller>
      </div>
      <div class="vxc-container">
        <scroller>
          <image style="width:750px;height:416px" src="root:img/my/team.png"></image>
        </scroller>
      </div>
      <div class="vxc-container">
        <scroller>
        <image style="width:750px;height:416px" src="root:img/my/jiangli.png"></image>
        </scroller>
      </div>
    </div>
  </div>
  </my-div>
</template>

<script>
const animation = weex.requireModule("animation")
export default {
  data: () => {
    return {
      index: 0,
      scope: '',
      data: [
        {
          label: "行政公告"
        },
        {
          label: "会议通知"
        },
        {
          label: "工作动态"
        }
      ],
    };
  },
  created() {
    this.scope = (750 / this.data.length);
  },
  methods: {
    special(dom, styles) {
      animation.transition(dom, {
        styles,
        duration: 300, //ms
        timingFunction: "ease",
        delay: 100 //ms
      });
    },
    onTabbarClick(index) {
      this.index = index;
      const wrapperEl = this.$refs['vxc-wrapper'];
      this.special(wrapperEl, {
        transform: `translate(${250 * index}px,0)`,
      })
      const mainEl = this.$refs['vxc-main'];
      this.special(mainEl, {
        transform: `translate(${-750 * index}px,0)`,
      })
    }
  }
};
</script>

<style>
.vxc-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vxc-flex-row {
  display: flex;
  flex-direction: row;
}

.vxc-header {
  width: 750px;
}
.vxc-active {
  background-color: white;
  position: absolute;
}
.vxc-container {
  width: 750px;
  height: 316px;
}
.tab{
  width: 750px;
  height: 80px;
  border-bottom: rgba(255,255,255,1);
}
.tab-item {
  width: 250px;
  height: 80px;
  
  
}
.vxc-active{
  content:'';
  position: absolute;
  width: 28px;
  height: 4px;
  background-color: rgba(60,71,98,1);
  bottom: 0;
  left: 111px;
}
.scroller{
  width: 750px;
  height: 336px;
}
</style>